<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>手替脚本</title>
    <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.1.0/index.js"></script>
    <link href="https://cdn.bootcss.com/element-ui/2.1.0/theme-chalk/index.css" rel="stylesheet">
</head>
<style>
    .box-card {
        margin-bottom: 7px;
    }

    .box-card>.el-card__body {
        font-size: 12px;
    }

    pre {
        white-space: pre-wrap;
        word-wrap: break-word;
    }
</style>

<body>
    <div id="list">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>手替APP交流群</span>
                <el-button @click="copy('216873231')" style="float: right; padding: 3px 0" type="text">复制群号</el-button>
            </div>
            <pre>群号: 216873231</pre>
        </el-card>
        <el-card v-for="(x,i) in rows" :key="i" class="box-card">
            <div slot="header" class="clearfix">
                <span>{{x.title}}</span>
                <el-button @click="copy(x.url)" style="float: right; padding: 3px 0" type="text">复制链接</el-button>
            </div>
			<p><b>链接: </b>{{x.url}}</p>
			<b>说明: </b>
            <pre>{{x.description}}</pre>
        </el-card>
    </div>
</body>
<script>
    Vue.use(ELEMENT)
    var vm = new Vue({
        el: document.querySelector("#list"),
        data: {
            list: "replace me"
        },
        computed: {
            rows() {
                return this.list.map(x => {
                    x.url = location.href + x.url.replace("./", "")
                    return x
                })
            }
        },
        methods: {
            copy(url) {
                var input = document.createElement("input");
                input.style.opacity = 0
                document.body.appendChild(input)
                input.value = url;
                input.select(); // 选择对象
                document.execCommand("Copy"); // 执行浏览器复制命令
                document.body.removeChild(input)
                this.$message.success("已复制")
            }
        }
    })
</script>

</html>